<template>
  <div id="cornerComment" v-if="detailVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>详情</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-button size="small" type="primary" plain icon="el-icon-plus" class="mb-10" @click="addList('init')">add
        </el-button>
        <div class="Json-list mb-10" v-for="(item, index) in jsonList" :key="index">
          <div class="Json-list-line">
            <span class="">{{index+1}}.</span>
            <el-input v-model="item.key_name" placeholder="key" maxlength="30" class="w-150 mr-10"/>
            <span v-if="item.type==1">:</span>
            <el-input v-model="item.value_name" v-if="item.type==1" placeholder="value" maxlength="30"
                      class="w-150 ml-10"/>
            <el-radio-group v-model="item.type" class="ml-10">
              <el-radio :label="1">键值</el-radio>
              <el-radio :label="2">JSON</el-radio>
            </el-radio-group>
            <el-button size="small" type="primary" class="ml-10" plain icon="el-icon-plus" v-if="item.type==2" @click="addSmallList(index)">add</el-button>
            <el-button size="small" type="danger" plain icon="el-icon-delete" plain @click="deleteList(index)"
                       class="ml-10">delete
            </el-button>
          </div>
          <div class="Json-small-list" v-if="item.type==2" v-for="(smallItem, smallIndex) in item.list" :key="'small'+smallIndex">
            <div class="Json-list-line">
              <el-input v-model="smallItem.key_name" placeholder="key" maxlength="30" class="w-150 mr-10"/>
              <span>:</span>
              <el-input v-model="smallItem.value_name" placeholder="value" maxlength="30" class="w-150 ml-10"/>
              <el-button size="small" type="danger" plain icon="el-icon-delete" plain @click="deleteSmallList(index, smallIndex)"
                         class="ml-10">delete
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button size="small" @click="closePOpup">cancel</el-button>
        <el-button size="small" type="primary" @click="saveJsonFn">confirmedit</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['visible'],
  name: "deviceDetail",
  data() {
    return {
      detailVisible: false,
      jsonList: [
        {
          key_name: '',
          value_name: '',
          type: 1,
          list: []
        }
      ]
    }
  },
  watch:{
    visible(){
      this.detailVisible = this.visible
      if(!this.visible){
        this.jsonList = [
          {
            key_name: '',
            value_name: '',
            type: 1,
            list: []
          }
        ]
      }
    }
  },
  methods: {
    addList(option) {
      if (option === 'init') {
        this.jsonList.push({
          key_name: '',
          value_name: '',
          type: 1,
          list: []
        })
      }
    },
    deleteList(index) {
      this.jsonList.splice(index, 1)
    },
    addSmallList(index){
      this.jsonList[index].list.push({
        key_name: '',
        value_name: '',
        type: 1,
        list: []
      })
    },
    deleteSmallList(index, small){
      this.jsonList[index].list.splice(small, 1)
    },
    saveJsonFn(){
      console.log('jsonList:', this.jsonList)
      let data_ = {}
      for(let item of this.jsonList){
        if(item.type===1){
          data_[item.key_name] = item.value_name
        }else{
          let smallJson = {}
          for(let small_ of item.list){
            smallJson[small_.key_name] = small_.value_name
          }
          data_[item.key_name] = smallJson
        }
      }
      console.log('data_:', JSON.stringify(data_))
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style scoped>
.Json-list {
  border: 1px solid #eee;
  padding: 10px;
}

.Json-list-line {
  display: flex;
  align-items: center;
}

.w-150 {
  width: 150px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.cornerComment-in {
  width: 700px;
  height: 60%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.Json-small-list {
  background: #eee;
  padding: 10px;
  margin-top: 10px;
}
</style>
